<template>
  <div ref="container" style="height:95%"></div>
</template>

<script>
import { Pie } from '@antv/g2plot';
export default {
  data() {
    return {}
  },
  methods: {
    loadCharts() {
      const data = [
        { type: 'Tscales', value: 27 },
        { type: 'Rscales', value: 25 },
        { type: 'Yscales', value: 18 },
        { type: 'Lscales', value: 15 },
        { type: 'Nscales', value: 10 },
        { type: '其他', value: 5 },
      ];

      const piePlot = new Pie(this.$refs['container'], {
        appendPadding: 10,
        data,
        angleField: 'value',
        colorField: 'type',
        radius: 0.9,
        label: {
          type: 'inner',
          offset: '-30%',
          content: ({ percent }) => `${(percent * 100).toFixed(0)}%`,
          style: {
            fontSize: 14,
            textAlign: 'center',
          },
        },
        interactions: [{ type: 'element-active' }],
      });

      piePlot.render();
      setInterval(() => {
        piePlot.changeData(data.map((d) => ({ ...d, value: d.value * Math.random() })));
      }, 1200);

    }
  },
  mounted() {
    this.loadCharts();
  }
}
</script>

<style>

</style>